<template>
  <div class="referral-tab">
    <!-- 统计信息 -->
    <div class="stats-section">
      <el-row :gutter="16">
        <el-col :span="12">
          <div class="stat-card">
            <div class="stat-icon">
              <el-icon><User /></el-icon>
            </div>
            <div class="stat-content">
              <div class="stat-value">{{ referrals.length }}</div>
              <div class="stat-label">邀请人数</div>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="stat-card">
            <div class="stat-icon">
              <el-icon><Download /></el-icon>
            </div>
            <div class="stat-content">
              <div class="stat-value">{{ downloadedCount }}</div>
              <div class="stat-label">已下载APP</div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 筛选和搜索 -->
    <div class="filter-section">
      <el-row :gutter="16" align="middle">
        <el-col :span="6">
          <el-input
            v-model="searchKeyword"
            placeholder="搜索昵称或UID"
            clearable
            prefix-icon="Search"
            size="small"
          />
        </el-col>
        <el-col :span="4">
          <el-select v-model="downloadStatus" placeholder="下载状态" size="small" clearable>
            <el-option label="全部状态" value="" />
            <el-option label="已下载" value="已下载" />
            <el-option label="未下载" value="未下载" />
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-select v-model="timeRange" placeholder="邀请时间" size="small" clearable>
            <el-option label="全部时间" value="" />
            <el-option label="最近7天" value="7" />
            <el-option label="最近30天" value="30" />
            <el-option label="最近90天" value="90" />
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" size="small" @click="exportReferrals">
            <el-icon><Download /></el-icon>
            导出数据
          </el-button>
        </el-col>
      </el-row>
    </div>

    <!-- 邀请记录列表 -->
    <div class="referrals-section">
      <div class="section-header">
        <div class="section-title">
          <el-icon><User /></el-icon>
          <span>邀请记录</span>
        </div>
        <div class="section-count">共 {{ filteredReferrals.length }} 条记录</div>
      </div>
      
      <el-table 
        :data="filteredReferrals" 
        border 
        stripe 
        style="width: 100%"
        :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
        row-class-name="referral-row"
      >
        <el-table-column prop="uid" label="推荐人UID" width="120" align="center" />
        
        <el-table-column label="用户信息" min-width="200">
          <template #default="scope">
            <div class="user-info">
              <div class="user-avatar">
                <el-avatar :size="40" :src="getUserAvatar(scope.row.nickname)">
                  {{ getInitials(scope.row.nickname) }}
                </el-avatar>
              </div>
              <div class="user-details">
                <div class="user-name">{{ scope.row.nickname }}</div>
                <div class="user-id">UID: {{ scope.row.uid }}</div>
              </div>
            </div>
          </template>
        </el-table-column>
        
        <el-table-column label="联系方式" min-width="180">
          <template #default="scope">
            <div class="contact-info">
              <div class="contact-item">
                <el-icon><Phone /></el-icon>
                <span class="contact-text">{{ maskPhone(scope.row.contact) }}</span>
              </div>
            </div>
          </template>
        </el-table-column>
        
        <el-table-column label="邀请时间" width="180">
          <template #default="scope">
            <div class="time-info">
              <div class="time-date">{{ formatDate(scope.row.inviteTime) }}</div>
              <div class="time-hour">{{ formatTime(scope.row.inviteTime) }}</div>
              <div class="time-ago">{{ getTimeAgo(scope.row.inviteTime) }}</div>
            </div>
          </template>
        </el-table-column>
        
        <el-table-column label="下载状态" width="120">
          <template #default="scope">
            <div class="download-status">
              <el-tag 
                :type="scope.row.downloaded === '已下载' ? 'success' : 'warning'" 
                size="small"
              >
                <el-icon v-if="scope.row.downloaded === '已下载'"><Check /></el-icon>
                <el-icon v-else><Clock /></el-icon>
                {{ scope.row.downloaded }}
              </el-tag>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <div class="pagination-section">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        :total="filteredReferrals.length"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { defineProps, ref, computed } from 'vue';
import { 
  User, 
  Download, 
  Search, 
  Phone, 
  Check, 
  Clock 
} from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';

const props = defineProps<{ referrals: any[] }>();

// 响应式数据
const searchKeyword = ref('');
const downloadStatus = ref('');
const timeRange = ref('');
const currentPage = ref(1);
const pageSize = ref(10);

// 计算属性
const downloadedCount = computed(() => {
  return props.referrals.filter(item => item.downloaded === '已下载').length;
});



const filteredReferrals = computed(() => {
  let filtered = props.referrals;
  
  // 关键词搜索
  if (searchKeyword.value) {
    filtered = filtered.filter(item => 
      item.nickname.toLowerCase().includes(searchKeyword.value.toLowerCase()) ||
      item.uid.toLowerCase().includes(searchKeyword.value.toLowerCase())
    );
  }
  
  // 下载状态筛选
  if (downloadStatus.value) {
    filtered = filtered.filter(item => 
      item.downloaded === downloadStatus.value
    );
  }
  
  // 时间范围筛选
  if (timeRange.value) {
    const days = parseInt(timeRange.value);
    const cutoffDate = new Date();
    cutoffDate.setDate(cutoffDate.getDate() - days);
    
    filtered = filtered.filter(item => {
      const inviteDate = new Date(item.inviteTime);
      return inviteDate >= cutoffDate;
    });
  }
  
  return filtered;
});

// 方法
function maskPhone(phone: string) {
  if (!phone) return '';
  return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
}

function getUserAvatar(nickname: string) {
  // 这里可以根据昵称生成头像URL，暂时返回空
  return '';
}

function getInitials(nickname: string) {
  return nickname.substring(0, 2).toUpperCase();
}

function formatDate(dateString: string) {
  const date = new Date(dateString);
  return date.toLocaleDateString('zh-CN');
}

function formatTime(dateString: string) {
  const date = new Date(dateString);
  return date.toLocaleTimeString('zh-CN', { 
    hour: '2-digit', 
    minute: '2-digit' 
  });
}

function getTimeAgo(dateString: string) {
  const date = new Date(dateString);
  const now = new Date();
  const diffMs = now.getTime() - date.getTime();
  const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
  
  if (diffDays === 0) return '今天';
  if (diffDays === 1) return '昨天';
  if (diffDays < 7) return `${diffDays}天前`;
  if (diffDays < 30) return `${Math.floor(diffDays / 7)}周前`;
  if (diffDays < 365) return `${Math.floor(diffDays / 30)}个月前`;
  return `${Math.floor(diffDays / 365)}年前`;
}

function exportReferrals() {
  ElMessage.success('导出功能开发中...');
}

function handleSizeChange(size: number) {
  pageSize.value = size;
  currentPage.value = 1;
}

function handleCurrentChange(page: number) {
  currentPage.value = page;
}
</script>

<style scoped>
.referral-tab {
  padding: 20px;
}

/* 统计卡片样式 */
.stats-section {
  margin-bottom: 24px;
}

.stat-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  padding: 20px;
  color: white;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
  transition: transform 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
}

.stat-card:nth-child(2) {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  box-shadow: 0 4px 12px rgba(240, 147, 251, 0.3);
}



.stat-icon {
  font-size: 24px;
  opacity: 0.9;
}

.stat-content {
  flex: 1;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 12px;
  opacity: 0.9;
}

/* 筛选区域样式 */
.filter-section {
  background: #f8f9fa;
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 20px;
}

/* 邀请记录区域样式 */
.referrals-section {
  margin-bottom: 20px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid #e4e7ed;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 16px;
  color: #303133;
}

.section-title .el-icon {
  color: #409eff;
}

.section-count {
  font-size: 12px;
  color: #909399;
}

.referral-row:hover {
  background-color: #f0f9ff !important;
}

/* 用户信息样式 */
.user-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-avatar {
  flex-shrink: 0;
}

.user-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.user-name {
  font-weight: 600;
  color: #303133;
  font-size: 14px;
}

.user-id {
  font-size: 11px;
  color: #909399;
}

/* 联系方式样式 */
.contact-info {
  display: flex;
  align-items: center;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.contact-item .el-icon {
  color: #409eff;
  font-size: 14px;
}

.contact-text {
  font-size: 13px;
  color: #606266;
  font-weight: 500;
}

/* 时间信息样式 */
.time-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.time-date {
  font-size: 12px;
  color: #606266;
}

.time-hour {
  font-size: 11px;
  color: #909399;
}

.time-ago {
  font-size: 10px;
  color: #c0c4cc;
  font-style: italic;
}

/* 下载状态样式 */
.download-status {
  display: flex;
  align-items: center;
}

.download-status .el-tag {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 分页样式 */
.pagination-section {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .stats-section .el-col {
    margin-bottom: 16px;
  }
  
  .filter-section .el-col {
    margin-bottom: 12px;
  }
  
  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .user-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}
</style> 